<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>Total Users</span>
              <el-tag type="success">+12%</el-tag>
            </div>
          </template>
          <div class="card-content">
            <h3>25,321</h3>
            <el-icon class="icon">
              <User />
            </el-icon>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>Total Transactions</span>
              <el-tag type="warning">+5%</el-tag>
            </div>
          </template>
          <div class="card-content">
            <h3>142,382</h3>
            <el-icon class="icon">
              <Wallet />
            </el-icon>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>Market Cap</span>
              <el-tag type="danger">-2%</el-tag>
            </div>
          </template>
          <div class="card-content">
            <h3>$125M</h3>
            <el-icon class="icon">
              <Money />
            </el-icon>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>Token Price</span>
              <el-tag type="info">$1.25</el-tag>
            </div>
          </template>
          <div class="card-content">
            <h3>$1.25</h3>
            <el-icon class="icon">
              <TrendCharts />
            </el-icon>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>Recent Transactions</span>
            </div>
          </template>
          <el-table :data="transactions" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="user" label="User" width="120" />
            <el-table-column prop="type" label="Type" width="100">
              <template #default="{ row }">
                <el-tag :type="row.type === 'Buy' ? 'success' : 'danger'">
                  {{ row.type }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="Amount" />
            <el-table-column prop="date" label="Date" />
            <el-table-column prop="status" label="Status">
              <template #default="{ row }">
                <el-tag :type="row.status === 'Completed' ? 'success' : 'warning'">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>Token Distribution</span>
            </div>
          </template>
          <div class="distribution-list">
            <div class="distribution-item" v-for="item in distribution" :key="item.label">
              <div class="item-info">
                <span class="label">{{ item.label }}</span>
                <span class="value">{{ item.value }}%</span>
              </div>
              <el-progress :percentage="item.value" :color="item.color" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { User, Wallet, Money, TrendCharts } from '@element-plus/icons-vue'

const transactions = ref([
  {
    id: '001',
    user: 'John Doe',
    type: 'Buy',
    amount: '1,000 NASY',
    date: '2025-05-06',
    status: 'Completed'
  },
  {
    id: '002',
    user: 'Jane Smith',
    type: 'Sell',
    amount: '500 NASY',
    date: '2025-05-03',
    status: 'Pending'
  },
  {
    id: '003',
    user: 'Bob Wilson',
    type: 'Buy',
    amount: '2,500 NASY',
    date: '2025-05-16',
    status: 'Completed'
  },
  {
    id: '004',
    user: 'Alice Brown',
    type: 'Buy',
    amount: '750 NASY',
    date: '2025-05-23',
    status: 'Completed'
  }
])

const distribution = ref([
  { label: 'Public Sale', value: 40, color: '#409EFF' },
  { label: 'Team', value: 20, color: '#67C23A' },
  { label: 'Marketing', value: 15, color: '#E6A23C' },
  { label: 'Development', value: 15, color: '#F56C6C' },
  { label: 'Reserve', value: 10, color: '#909399' }
])
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.stat-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      font-size: 24px;
      margin: 0;
    }

    .icon {
      font-size: 32px;
      color: #409EFF;
    }
  }
}

.distribution-list {
  .distribution-item {
    margin-bottom: 20px;

    .item-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }

    .label {
      color: #606266;
    }

    .value {
      font-weight: bold;
    }
  }
}
</style>